<template>
	<el-drawer v-model="visible" :with-header="false" :size="700" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main style="padding:20px 20px 20px 20px">
				<el-container>
					<el-tabs v-model="activeName">
						<el-tab-pane label="消息" name="first">
							<div class="message-title">{{rowData.title}}</div>
							<div class="message-subtitle">发布时间：{{rowData.createTime}}</div>
							<div class="" style="padding: 15px 0 20px;" v-html="rowData.content"></div>
						</el-tab-pane>
						<el-tab-pane label="接收人" name="second">
							<scDialogTable ref="table" :apiObj="$API.message.member"  :params="search">
								<el-table-column label="接收人">
									<template #default="scope">
										{{scope.row.receiver.name || '--'}}
									</template>
								</el-table-column>
								<el-table-column label="状态" width="100">
									<template #default="scope">
										<el-tag size="mini" :type="scope.row.isView.value == 0 ? 'info' : ''">{{scope.row.isView.name}}</el-tag>
									</template>
								</el-table-column>
							</scDialogTable>
						</el-tab-pane>
					</el-tabs>
				</el-container>
			</el-main>
			<el-footer>
				<el-button @click="visible=false">关闭</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				loading: false,
				mode: "add",
				titleMap: {
                    show: '查看消息'
				},
                // form: [],
				activeName: 'first',
                rowData: {},
				visible: false,
				moreFlag: false,
				search: {
					id: ''
				}
			}
		},
		mounted() {

		},
		methods: {
			//查看更多
			lookMore(){
				this.moreFlag = !this.moreFlag
			},
			//显示
			open(){
				this.visible = true;
				return this;
			},
			//表单注入数据
			setData(row){
                // this.form = data.list
                this.rowData = row
                this.search.id = row.id
			}
		}
	}
</script>

<style scoped>
.message-title{text-align: center;font-size: 20px;font-weight: bold; margin-top: 10px;}
.message-subtitle{font-size: 14px;color: #999;padding-top: 20px;display: flex;}
.tags{flex: 1;}
.tags-list{display: flex;}
.tags-list-content{flex: 1;padding-right: 10px;height: 22px;overflow: hidden;transition: all 0.2s;}
.tags-list-content .item{color: #999;}
.tags-list-content.more{height: auto;overflow: visible;cursor: pointer;}
.more-icon{transition: all 0.2s;font-size: 16px;}
.more-icon.more-icon-active{transform: rotate(90deg);}
.tags-list-content span{line-height: 22px;}
.more-icon-box{cursor: pointer;}
</style>
